<template>
    <div>
        <el-dialog :title="utitle" width="800px" class="icon-dialog" :visible.sync="show" @open="nowopen"
            :before-close="closeForm" append-to-body>
            <div class="app-container">
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
                    </el-col>
                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
                </el-row>
                <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column label="ID" align="center" prop="id" width="60" />
                    <el-table-column label="生产线名称" align="center" prop="lineName" />
                    <el-table-column label="生产线编码" align="center" prop="lineCode" />

                    <el-table-column label="操作" align="center" fixed="right" width="200">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
                <!-- 添加或修改对话框 -->
                <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="500px"
                    append-to-body>
                    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                        <el-form-item label="生产线" prop="lineCode">
                            <el-select v-model="form.lineCode" placeholder="请选择">
                                <el-option v-for="item in options" :key="item.lineCode" :label="item.lineName"
                                    :value="item.lineCode">
                                </el-option>
                            </el-select>
                        </el-form-item>

                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="submitForm">确 定</el-button>
                        <el-button @click="cancel">取 消</el-button>
                    </div>
                </el-dialog>

            </div>
        </el-dialog>
    </div>
</template>
<script>
import { queryList, getInfo, remove, save, update, productionList } from "@/api/self/product_scx";
export default {
    name: 'dialoinfo',
    components: {
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        size: {
            type: String,
            default: 'small'
        },
        productCode: {
            type: String,
            default: '0'
        },
        productTitle: {
            type: String
        }
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            dataList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                productCode: undefined,
            },
            // 表单参数
            form: {
                productCode:''
            },
            // 表单校验
            rules: {
                lineCode: [
                    { required: true, message: "生产线不能为空", trigger: "blur" }
                ],
            },
            utitle: '',
            options:[]
        }
    },
    methods: {
        nowopen() {
            this.queryParams.productCode = this.productCode
            this.utitle = this.productTitle + '---生产线设置'
            productionList().then(res => {
                this.options = res.data
            })
            this.getList();
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            queryList(this.queryParams).then((response) => {
                this.dataList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: undefined,
                positionName: undefined,
                positionCode: undefined,
                benchCode: undefined,
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.form.productCode = this.productCode
            this.title = "添加";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids[0];
            getInfo({ id }).then((response) => {
                this.form = response.data;
                this.open = true;
                this.title = "修改";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.form.id != null) {
                        update(this.form).then((response) => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        save(this.form).then((response) => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id ? [row.id] : this.ids;
            this.$modal
                .confirm('是否确认删除编号为"' + ids + '"的数据项？')
                .then(function () {
                    return remove({ ids });
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => { });
        },
        closeForm() {
            this.$emit('update:show', false)
            this.$emit('refesh_list')
        },
    }
}
</script>
<style scoped>
.app-container {
    padding: 0px;
}

.el-dialog__body {
    padding: 20px;
}
</style>
